<div>
    {{data}}
    <ul class="top-wrapper">
        <li ng-repeat="v in data" ng-class="{active:$first}">{{v.title}}</li>

    </ul>
    <div class="content-wrapper">
        <div ng-class="{active:$first}" ng-repeat="v in data">
            {{v.content}}
        </div>

    </div>
</div>
<style>
    .top-wrapper {
        padding: 0;
        margin: 0;
        height: 40px;
        line-height: 40px;
    }

    .top-wrapper li {
        float: left;
        border: 1px solid red;
        border-left: none;
        list-style: none;
        padding: 0px 20px;
    }

    .top-wrapper li:first-child {
        border-left: 1px solid red;
    }

    .top-wrapper li.active {
        background: #000;
        color: white;
    }

    .content-wrapper {
        width: 300px;
        height: 220px;
        border: 1px solid red;
        position: relative;
    }

    .content-wrapper div {
        width: 300px;
        height: 220px;
        position: absolute;
        background: #fff;
        display: none;
        font-size: 50px;
        text-align: center;
        line-height: 220px;
    }

    .content-wrapper div.active {
        display: block;
    }
</style>
